<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        
    </h:head>
    <ui:composition template="/WEB-INF/Template/Template.xhtml">
        <ui:define name="content">
            <h:form id="form">
                <p:panelGrid columns="4" style="border:0 !important;">
                    <h:outputText id="displayRange" value="Between #{chartBean.min} and #{chartBean.max}"/>
                    <p:slider  for="txt6,txt7" display="displayRange" style="width:400px" range="true" animate="true"  maxValue="52" 
                               displayTemplate="Between {min} and {max}"/>
                    <p:selectOneMenu value="#{chartBean.year}">
                        <f:selectItem itemLabel="2014" itemValue="2014" />
                        <f:selectItem itemLabel="2013" itemValue="2013" />
                    </p:selectOneMenu>
                    <p:commandButton ajax="false" update=":form:category,:form:custom,:form:list" value="Par Week"/>
                </p:panelGrid>
                <p:lineChart  widgetVar="chart" id="category" value="#{chartBean.incidentsSoutraitantWeek}" legendPosition="e" animate="true" xaxisLabel="Week" yaxisLabel="Nombre Incidents" 
                              title="Incidents Par Week"  minY="0"  style="height:500px;margin-top:20px" zoom="true" datatipFormat="#{chartBean.datatipFormat}" /> 
                <p:dialog widgetVar="dlg">
                    <p:pieChart  id="custom" value="#{chartBean.pieModel}" legendPosition="e" fill="false" showDataLabels="true"  
                                 title="Incident Par Week/SousTraitant" style="width:600px;height:400px" sliceMargin="3" diameter="300" /> 
                </p:dialog>
                <h:inputHidden id="txt6" value="#{chartBean.min}" />  
                <h:inputHidden id="txt7" value="#{chartBean.max}" /> 
                <p:commandButton oncomplete="dlg.show()" value="Afficher Pourcentage" />

                <script>
                    function exportChart() {
                        //export image  
                        $('#form\\:output').empty().append(chart.exportAsImage());

                        //show the dialog  
                        dlg1.show();
                    }



                </script>
                <p:commandButton update=":form:output" type="button" value="Image" icon="ui-icon-extlink" onclick="exportChart()"/>  

                <p:dialog widgetVar="dlg1" showEffect="fade" modal="true" header="Chart as an Image">  
                    <p:outputPanel id="output" layout="block" />  
                </p:dialog>  
                <p:commandButton oncomplete="tableau.show()" value="Afficher Tableau" />
                <p:dialog widgetVar="tableau"  showEffect="fade" modal="true"  header="Tableau" style="max-height:600px;overflow-y: auto;overflow-x: hidden">  

                    <p:dataTable id="salesTable" var="sale"  value="#{chartBean.listweek}" style="overflow: hidden">  

                        <f:facet name="header">
                            Incident/Week/Sous-Traitants
                        </f:facet>
                        <f:facet name="footer">
                            Incident/Week/Sous-Traitants
                        </f:facet>
                        <p:columnGroup type="header">  
                            <p:row>  
                                <p:column rowspan="3" headerText="Week" />  
                                <p:column colspan="#{chartBean.soustraitants.size()}" headerText="Sous-Traitant" />  
                            </p:row>  



                            <p:row> 
                                <c:forEach items="#{chartBean.soustraitants}" var="sous">
                                    <p:column headerText="#{sous.libelle}" />
                                </c:forEach>
                            </p:row>  
                        </p:columnGroup>  

                        <p:column>  
                            W#{sale.lweek}  
                        </p:column>
                        <c:forEach items="${chartBean.liste}" varStatus="statut" var="row">  

                            <p:column>  
                                #{row[sale.lweek-1]} 


                            </p:column> 

                        </c:forEach>


                    </p:dataTable>  


                </p:dialog>

            </h:form>

        </ui:define></ui:composition>
</html>
